<template>
  <div class="search_header">
    <a-form
      ref="searchFormRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="searchFormState"
    >
      <a-row :gutter="24">
        <%_ for(var i = 0; i < formConfig.fields.length; i++){ _%>
          <a-col :span="8">
          <%_ if(formConfig.fields[i].type === 'text'){ _%>
          <a-form-item name="<%= formConfig.fields[i].name %>" label="<%= formConfig.fields[i].label %>">
            <a-input v-model:value="searchFormState.<%= formConfig.fields[i].name %>" placeholder="请输入<%= formConfig.fields[i].label %>" />
          </a-form-item>
          <%_ } else if(formConfig.fields[i].type === 'select'){ _%>
          <a-form-item name="<%= formConfig.fields[i].name %>" label="<%= formConfig.fields[i].label %>">
            <DictSelector v-model="searchFormState.<%= formConfig.fields[i].name %>" dict="dataType" placeholder="请选择<%= formConfig.fields[i].label %>" />
          </a-form-item>
          <%_ } else if(formConfig.fields[i].type === 'cascader'){ _%>
          <a-form-item name="<%= formConfig.fields[i].name %>" label="<%= formConfig.fields[i].label %>">
            <a-cascader v-model:value="searchFormState.<%= formConfig.fields[i].name %>" :options="[]" placeholder="请选择<%= formConfig.fields[i].label %>" :fieldNames="{ label: 'name', value: 'id' }" />
          </a-form-item>
          <%_ } else if(formConfig.fields[i].type === 'any'){ _%>
          <a-form-item name="<%= formConfig.fields[i].name %>" label="<%= formConfig.fields[i].label %>">
            需要封装一波组件
          </a-form-item>
          <%_ } else if(formConfig.fields[i].type === 'date'){ _%>
          <a-form-item name="<%= formConfig.fields[i].name %>" label="<%= formConfig.fields[i].label %>">
            <a-date-picker v-model:value="searchFormState.<%= formConfig.fields[i].name %>" value-format="YYYY-MM-DD" placeholder="请选择<%= formConfig.fields[i].label %>"/>
          </a-form-item>
          <%_ } else if(formConfig.fields[i].type === 'dateRange'){ _%>
          <a-form-item name="<%= formConfig.fields[i].name %>" label="<%= formConfig.fields[i].label %>">
            <a-range-picker v-model:value="searchFormState.<%= formConfig.fields[i].name %>" value-format="YYYY-MM-DD" :placeholder="['开始时间','结束时间']"/>
          </a-form-item>
          <%_ } _%>
        </a-col>
        <%_ } _%>
        <a-col :span="8">
          <a-form-item label="">
            <a-button type="primary" class="mr-[10px]" @click="refresh">
              <template #icon><SearchOutlined /></template>
              搜索
            </a-button>
            <a-button type="primary" ghost @click="reset">
              <template #icon><redo-outlined /></template>
              重置
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <div class="table_wrapper">
    <s-table
      ref="tableRef"
      :columns="columns"
      :data="loadData"
      bordered
      :row-key="(record) => record.id"
      :tool-config="toolConfig"
      :scroll="{ x: '100%' }"
    >
      <%_ if(tableConfig.operateList.length > 0){ _%>
      <template #operator>
        <a-space>
          <%_ for(var i = 0; i < tableConfig.operateList.length; i++){ _%>
          <a-button type="primary" @click="handleAdd">
            <template #icon><plus-outlined /></template>
            <span><%= tableConfig.operateList[i] %></span>
          </a-button>
          <%_ } _%>
        </a-space>
      </template>
      <%_ } _%>

      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'dataType'">
          {{ $TOOL.dictTypeData('dataType', record.dataType) }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <%_ for(var i = 0; i < tableConfig.actionList.length; i++){ _%>
              <%_ if(tableConfig.actionList[i] === '删除'){ _%>
                <a-popconfirm title="确定删除此数据？" @confirm="handleDel(record)">
                  <a-button
                    type="link"
                    danger
                    class="!px-[0]"
                  >删除</a-button>
                </a-popconfirm>
              <%_ } else { _%>
                <a-button type="link" class="!px-[0]" @click="handleEdit(record)">
                  <%= tableConfig.actionList[i] %>
                </a-button>
              <%_ } _%>
            <%_ } _%>
          </a-space>
        </template>
      </template>
    </s-table>
  </div>
  <Form ref="formRef" @successful="refresh" />
</template>

<script setup>
  import testApi from '@/api/testApi'
  import tool from '@/utils/tool'
  import Form from './form.vue'
  import { message } from 'ant-design-vue'

  const searchFormRef = ref()
  const tableRef = ref()
  const searchFormState = ref({})
  const formRef = ref()

  const reset = () => {
    searchFormRef.value.resetFields()
    refresh()
  }

  const refresh = () => {
    tableRef.value.refresh()
  }

  const toolConfig = { refresh: false, height: false, columnSetting: false, striped: false }

  const columns = [
    {
      title: '序号',
      customRender: (i) => i.index + 1,
      align: 'center',
      width: 60
    },
    <%_ for(var i = 0; i < tableConfig.columns.length; i++){ _%>
    {
      title: '<%= tableConfig.columns[i].title %>',
      dataIndex: '<%= tableConfig.columns[i].dataIndex %>',
      align: 'center',
      width: <%= tableConfig.columns[i].width %>,
      ellipsis: true
    },
    <%_ } _%>
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      width: 160,
      fixed: 'right'
    }
  ]

  const loadData = () => {
    return Promise.resolve({ records: <%- JSON.stringify(tableConfig.data,null,2) %> })
  }

  const handleAdd = () => {
    formRef.value.onOpen(null, 'add')
  }

  const handleEdit = (record) => {
    formRef.value.onOpen(record,'edit')
  }

  const checkDetail = (record) => {
    formRef.value.onOpen(record,'detail')
  }

  const handleDel = async ({ id }) => {
    try {
      await testApi.doDel([{ id }])
      refresh()
      message.success('删除成功')
    } catch (e) {
      console.log(e)
    }
  }
</script>

<style lang="postcss" scoped>
  .search_header {
    @apply bg-no-repeat bg-[length:100%_100%] bg-[url(@/assets/images/public/card_search_header_bg.png)] px-[24px] pt-[24px] pb-[5px] rounded-b-[20px];
  }

  .table_wrapper {
    @apply bg-no-repeat bg-[length:100%_100%] bg-[url(@/assets/images/public/card_form_bg.png)] mt-[20px] rounded-b-[20px] px-[20px] pb-[10px] pt-[20px];
  }
</style>
